<template>
    <div class="apply">
     <van-nav-bar title="订单提交" left-arrow @click-left="onClickLeft" />
      <!-- 表单列表 -->
      <div class="form">
        <van-field
          class="van-field-isRequired"
          readonly
          :rules="[{ required: true, message: '请选择报销地点' }]"
          clickable
          @click="showPopup(1)"
          v-model="show.pageChsooch.company.title"
          label="报销地点"
          placeholder="点击选择报销地点"
        />
        <van-field
          class="van-field-isRequired"
          readonly
          clickable
          :rules="[{ required: true, message: '点击选择代办事项' }]"
          @click="showPopup(2)"
          v-model="show.pageChsooch.matter.title"
          label="代办事项"
          placeholder="点击选择代办事项"
        /> 
        <van-field
          class="van-field-isRequired"
          readonly
          clickable
          :rules="[{ required: true, message: '点击选择报销类型' }]"
          @click="showPopup(3)"
          v-model="show.pageChsooch.expenseCate.title"
          label="代办类型"
          placeholder="点击选择代办类型"
        /> 
        <van-field
          class="van-field-isRequired"
          readonly
          clickable
          label="报销时间"
          :rules="[{ required: true, message: '点击选择报销时间' }]"
        >
        <template #input><div @click="showPopup(4)" v-if="post.isTimeOver == '-1' || post.isTimeOver == null"><input type="text" readonly="readonly" placeholder="点击选择报销天数" class="van-field__control"  v-model="show.pageChsooch.daysNum.daysNum"></div><div v-else>NA</div></template>
        </van-field>
    <!-- 上传资源列表 -->
      <span v-show="show.selectShow">
        <van-field label="发票是否过期" v-if="this.show.SciShow" class="van-field-isRequired">
          <template #input>
         <van-radio-group v-model="post.isTimeOver" direction="horizontal" @change="switchPirce">
          <van-radio name="1">是</van-radio>
          <van-radio name="-1">否</van-radio>
        </van-radio-group>
            <p class="tips">如果发票已经过期请勾选是，否则请勾选否</p>
          </template>
        </van-field>
      </span>
    <div class="data-wrap" v-for="(item,index) in show.expenseCate_fieldJson" :key="index" v-show="show.selectShow">
       <!-- file类型 -->
      <template v-if="item.type == 'file'">
      <template v-if="item.isShow">
        <van-field :label="item.fieldCh" :class="item.isCanIgnore == 1?'':'van-field-isRequired needTips'">
          <template #input>
            <van-uploader accept="image/*,.pdf" :after-read="afterRead" v-model="show[item.fieldEn]" :max-count="item.maxCount" :name="item.fieldEn" @delete='deleteFiles' @oversize="oversize" :max-size="500 * 1024" />  
             <p class="tips">{{item.remark}}</p>
          </template>
        </van-field>
      </template>   
      </template>
      <!-- switch开关 也就是check类型 -->
      <template v-if="item.type == 'check'">
        <van-field :label="item.fieldCh" :class="item.fieldEn != 'isOtherPay'?'van-field-isRequired':''">
          <template #input>
            <van-radio-group v-model="post[item.fieldEn]" direction="horizontal" @change="switchChange" v-if="item.fieldEn != 'isOtherPay' ">
              <van-radio v-for="(val,index) in item.data" :key="index" :name="val.value" v-model="post[item.fieldEn]">{{val.title}}</van-radio>
            </van-radio-group>
            <template v-if="item.fieldEn == 'isOtherPay' ">
                <van-switch v-model="post[item.fieldEn]" size="20px" @change="otherPayChange" active-value="1" inactive-value="-1" />  
            <span class="check-title">{{post[item.fieldEn] == 1?item.data[1].title:item.data[0].title}}</span>
            </template>
            <p class="tips">{{item.remark}}</p>
          </template>  
         </van-field>
      </template>
      <!-- radio单选框 也就是list类型 -->
      <template v-if="item.type == 'list'">
        <van-field :label="item.fieldCh">
          <template #input>
          <van-radio-group v-model="post[item.fieldEn]" @change="radioChange">
            <van-radio :name="items.value" v-for="(items,index) in item.data" :key="index" v-model="post[item.fieldEn]">{{items.title}}</van-radio>
          </van-radio-group>
          <p class="tips">{{item.remark}}</p>
          </template>  
        </van-field>
      </template>
      <!-- select 其实也是radio -->
      <template v-if="item.type == 'select' ">
      <template v-if="item.isShow">  
        <van-field :label="item.fieldCh">
          <template #input>
            <radios :list="item.data" @Change="radioValue" :name="item.fieldEn" v-model="post[item.fieldEn]" />
          </template>
        </van-field>
      </template>  
      </template>
      <!-- input 也就是输入框 -->
      <template v-if="item.type == 'input'">
      <template v-if="item.isShow">  
      <!-- 如果没有展示条件 或者符合展示条件的显示 -->  
        <van-field :label="item.fieldCh" :placeholder="'请输入'+item.fieldCh" v-model="post[item.fieldEn]" />
      </template>
      </template>
    </div>  
  </div> 
    <!-- 弹出层 及一些 必需但不是渲染生成的东西 -->
    <!-- Loading -->
    <div class="loading-box" v-if="show.loading">
      <van-loading size="24px" vertical type="spinner" color="#1989fa">加载中...</van-loading>  
    </div>
    <!-- 弹出层 -->
    <Popups
      ref="popup"
      :list="show.selectList.popupList"
      @confirm="handleConfirm"
    />
    <!-- 底部价格 -->
    <div class="apply-footer" v-show="show.selectShow" style="  position: fixed;bottom:0;left:0;width:100%;height: 50px;padding: 0 16px;font-size: 14px;z-index:1;display: flex;justify-content:space-between;align-items: center;background: #fff;
box-sizing: border-box;">
      <div class="footer-price">
        合计：<span style="color:#ee0a24;"><font style="font-size:12px">￥</font><font style="font-size:20px;">{{show.price.priceReal}}</font></span> <s style="color: #909399;">￥{{show.price.priceDel}}</s>
      </div>
      <div class="footer-btn">
        <van-button @click="Submit()" type="info" :loading="show.submitLoading" loading-text="提交中...">提交订单</van-button> 
      </div>
    </div>
    <van-dialog v-model="show.timeoverDialog" @confirm="backTop">
      <van-cell style="margin-bottom:0 !important;padding:20px 16px;"><span style="width: 100%;display: flex;justify-content: center;font-size:15px">请勾选<font color="red">发票是否过期</font></span></van-cell>
    </van-dialog>
  </div>
</template>
<script>
import Popups from './components/popup.vue' //弹出层组件
import radios from './components/radio.vue'  //单选框
import {Loading,Dialog,Uploader,RadioGroup, Radio,Field,Toast} from 'vant';
import switchs from 'vant/lib/switch/index'
import {get} from '../../../public/API/query'  //get方法
import config from '../../../public/config'    //配置文件
import Axios from 'axios';
  export default {
	components:{Popups,Loading,RadioGroup, Radio ,radios,Field,Toast,switchs},
    data () {
      return {
        online:{     //这里是接口请求的数据
          expenseCateCompanyPriceTree:'',  //请求来的主体data数据
          data:{}                          //总数据
        },
        show:{      //用作页面展示    
          selectShow:false,                   //资料上传列表是否显示
          timeoverDialog:false,              //发票是否过期弹出窗
          flag:true,                        //是否可以选择
          scrollTop: 0,
          submitLoading:false,            //提交按钮加载动画
          travelExpensesApproval:[],
          planeOrTrainTicket:[],              //车票或火车票
          stayInvoice:[],                     //住宿发票
          payByCardLog:[],                    //公务卡刷卡记录
          meetingCost:[],                     //会议费
          meetingNotice:[],                   //会议通知
          invoice:[],                         //发票
          invoiceEn:[],                       //文章翻译页
          retrievalReport:[],                 //检索报告
          printSample:[],                     //打印样品
          contract:[],                        //合同
          testReport:[],                      //检测报告
          acceptanceNotice:[],                //受理通知书
          payNotice:[],                       //缴费通知书
          cover:[],                           //封面
          catalog:[],                         //目录
          articleIndex:[],                    //文章首页
          ethic:[],                           //伦理审查批件  
          loading:true,                       //加载动画   
          SciShow:true,                       //当代办类型为sci不显示   
		      selectList:{
		        popupList:[],         																								//弹出层picker列表数据
			      matter:[{ title: "签字报销", id: "3" },{ title: "其他", id: "4" }],    //代办事项 picker列表 （默认）
		      },
		      pageChsooch:{
		        company:{},                      //报销地点
			      matter:{},                       //待办事项
		  	    expenseCate:{},									 //报销类型
			      daysNum:{},                      //报销日期
          },
        // 数据列表  
		      expenseCate_fieldJson:[{
			      fieldCh:'',                    //中文名字
			      fieldEn:'',                    //英文名字
			      isMore:' ',                    //是否多选
			      remark:'',                     //说明  
			      showCondition:[],              //展示条件
			      type:'',                       //类型
			      value:'',                      //value值
			      maxCount:1                     //多图上传 最多上传图片数量
		      }],
		      price:{
			      priceDel:'', 											//原价
			      priceReal:''                    	//现价
          },
        },
        action:{},   //用户操作的数据 
        post:{       //用户提交的数据
          expend_id:{},
          expenseCateCompanyPrice_id:'',        //价格id
		      service_project:'',                   //代办事项id
          isTimeOver:null,                     //发票是否过期
          travelExpensesApproval:null,          //差旅费审批表
          planeOrTrainTicket:null,              //车票或火车票
          stayInvoice:null,                     //住宿发票
          payByCardLog:null,                    //公务卡刷卡记录
          meetingCost:null,                     //会议费
          meetingNotice:null,                   //会议通知
          isOfficialCard:null,                 //是否选择公务卡
          invoice:null,                         //发票
          invoiceEn:null,                       //文章翻译页
          money:1,                              //金额
          retrievalReport:[],                 //检索报告
          printSample:null,                     //打印样品
          contract:null,                        //合同
          testReport:null,                      //检测报告
          acceptanceNotice:null,                //受理通知书
          payNotice:null,                       //缴费通知书
          cover:null,                           //封面
          catalog:null,                         //目录
          articleIndex:null,                    //文章首页
          isOtherPay:-1,                     //报销人员
          payType:'',                            //报销方式
          payNo:'',                             //发薪号
          payName:'',                           //发薪姓名
          ethic:null,                           //伦理审查批件    
          isSetSelfName:false,
        }  
      }     
    },
    methods:{
      //popup 选择
      showPopup(i) {
        switch (i) {
          case 1:
            this.show.selectList.popupList = this.online.expenseCateCompanyPriceTree;
            this.$refs["popup"].show(1);
          break;
          case 2:
            this.show.selectList.popupList = this.show.selectList.matter;
            this.$refs["popup"].show(2);
          break;
          case 3:
            this.show.selectList.popupList = this.show.pageChsooch.company._child;
            this.$refs["popup"].show(3);
          break;
          case 4:
            let value = this.show.pageChsooch.expenseCate._child.filter(item => item.daysNum != 0);
            this.show.selectList.popupList = value;
            if(this.show.flag){
              this.$refs["popup"].show(4);
            }  
          break;
        }
      },
      handleConfirm(val,index,flag=true){
        switch(index) {
          case 1: 
            if(val.title == this.show.pageChsooch.company.title){
              return false;
            }else{  
              if(this.$ClosePrompt(this.$ENDTIME)){
                Dialog.alert({
                  title: '提示',
                  message: `尊敬的用户，您好！感谢您对【我爱报销】的喜爱与信任！目前由于财务2020年度专利经费不足，专利代报只接单，所有专利订单将在2021年1月1日后继续为您代报，请悉知!`
                }) 
              }
              this.show.pageChsooch.company = val
              this.post.isTimeOver = null;
              this.show.selectShow = true //地址选择后 显示上传文件
              this.defData(val);  //默认数据
            }
          break;
          case 2:
            if(val.title == this.show.pageChsooch.matter.title){
              return false;  
            }else{
              this.show.pageChsooch.matter = val;
            }
          break;
          case 3:
            if(val){
              val.title == 'SCI'?this.show.SciShow = false:this.show.SciShow = true;
              if(val.title == this.show.pageChsooch.expenseCate.title){
                return false;
              }else{  
                this.show.pageChsooch.expenseCate = val;
                let value =  val._child.filter(item => item.daysNum != 0);
                this.show.pageChsooch.daysNum = value[0]
                this.post.expend_id = value[0]
                this.post.expenseCateCompanyPrice_id = value[0].id;
                this.computedPrice(value[0])
                // 当不为默认情况时 清空表单
              if(flag){
                this.clear(3);  
              }
             this.show.flag = true;
             val._child.forEach(item => { 
                if(item.daysNum != 0){
                  String(item.daysNum).indexOf('天') == -1?item.daysNum = item.daysNum+'天':item.daysNum = item.daysNum  
                }
              })
              // 如果接口不存在改字段 则加默认字段
              let expenseCate_fieldJson=[];
              val._child[0].expenseCate_fieldJson.map((item) => {
                if(item.maxCount == undefined){
                  item.maxCount = 1;  
                }
                if(item.value == undefined){
                  item.value = ''; 
                }
                if(item.isShow == undefined){
                  item.isShow = false;
                }
                if(item.showCondition.length == 0){
                  item.isShow = true 
                }
                if(item.maxCount > 1){
                  this.post[item.fieldEn] = [];
                }
                expenseCate_fieldJson.push(item)
              })
              this.show.expenseCate_fieldJson = expenseCate_fieldJson;
              this.showCondition(this.show.expenseCate_fieldJson);
              }
           }
          break;
          case 4:
          if(val){
            this.post.expend_id = val;
            this.computedPrice(val)
            this.show.pageChsooch.daysNum = val;
            this.post.expenseCateCompanyPrice_id = val.id;   //价格id
            // 填完最后一个 且不能为空 就是需要前面三个都是选择 所以这里全选 出现下面的列表
            if(this.show.pageChsooch.daysNum != {}){
              this.show.selectShow = true;
            }
          }
          break;
        }      
      },
    // 清空表单
      clear(index){
        switch(index){
          case 1:
          break;
          case 3:
            this.show.expenseCate_fieldJson = [];
            this.post.isOfficialCard = null;
            this.show.selectShow = false;
            this.post.isTimeOver = null;
            this.show.pageChsooch.daysNum = {}
          break;
        }
        // 展示
        this.show.pageChsooch.company._child.map(item => {
          item._child.map((val) => {
            val.expenseCate_fieldJson.map((value) => {
              if(value.type == 'file'){
                this.show[value.fieldEn] = [];  
                this.post[value.fieldEn] = null;
              }else if(value.type == 'check'){
                if(value.fieldEn == 'isOtherPay'){
                  this.post[value.fieldEn] = '-1'
                }else{
                  this.post[value.fieldEn] = null  
                }
              }else if(value.type == 'list' || value.type == 'select'){
                this.post[value.fieldEn] = 1  
              }else if(value.type == 'input'){
                this.post[value.fieldEn] = '';  
              }  
            })  
          })
        })    
      },
    //默认数据  
      defData(val){
        let data = this.show.pageChsooch.company._child.filter(item => item.title == '专利'||item.title == '实用新型')
        this.handleConfirm(data[0],3,false)
        this.show.pageChsooch.matter = this.show.selectList.matter[0];
        this.show.pageChsooch.expenseCate = data[0]
        let value = data[0]._child.filter(item => item.daysNum != 0);
        this.show.pageChsooch.daysNum = value[0];
        this.computedPrice(value[0])
        this.post.expend_id = value[0]
      },
    // 计算价格、
      computedPrice(val){
          this.show.price.priceReal = val.priceReal;
          this.show.price.priceDel = val.priceDel;      
      },
      // 计算展示条件 （关键部分代码）
      showCondition(val){
        let showConditionList = val.filter(item => item.showCondition.length != 0)   //获取需要展示条件的表单控件 
        // 如果存在需要展示条件的 那么走下面的流程  没有则退出函数
        if(showConditionList.length>0){
          // 大于1 需要展示两个 那么需要遍历 另作判断
          if(showConditionList.length>1){
            showConditionList.map((item) => {
            let arr = [];
            arr.push(item.showCondition[0].field)
            arr = this.removeVal(arr);  //数组去重  
          // 大于1的业务逻辑暂时还没有 所以这里暂不考虑
            if(arr.length == 1){
              var value = this.post[arr[0]]    //获取当前选项的值
            }
            var i = this.findArr(item.fieldCh); //寻找索引
            if(item.showCondition[0].m[0] == '='){
              let needVal = item.showCondition[0].m[1]
              value == needVal?this.show.expenseCate_fieldJson[i].isShow = true : this.show.expenseCate_fieldJson[i].isShow = false   
            }else if(item.showCondition[0].m[0] == 'in'){
              let needVal = item.showCondition[0].m.slice(1)
              let index = needVal[0].indexOf(value);
              index != -1?this.show.expenseCate_fieldJson[i].isShow = true : this.show.expenseCate_fieldJson[i].isShow = false
              this.show.expenseCate_fieldJson[i].isShow?this.post[this.show.expenseCate_fieldJson[i].fieldEn] = this.post[this.show.expenseCate_fieldJson[i].fieldEn]:this.show.expenseCate_fieldJson[i].maxCount>1?this.post[this.show.expenseCate_fieldJson[i].fieldEn] = []:this.post[this.show.expenseCate_fieldJson[i].fieldEn] = null
            }
            this.$forceUpdate();   
          })  
          }else{
            var values = this.post[showConditionList[0].showCondition[0].field]
            let operas = showConditionList[0].showCondition[0].m[0];
            let index = this.findArr(showConditionList[0].fieldCh);
            //  这里 in 就不做了 没有 这个业务逻辑 如果有 请参考上面的方法  取数组 运算符后的 也就是slice(1) 然后 indexof -1就是不匹配 其余都算匹配
            if(operas == '='){
              let needVal =  showConditionList[0].showCondition[0].m[1];
              values == needVal?this.show.expenseCate_fieldJson[index].isShow = true : this.show.expenseCate_fieldJson[index].isShow = false  
              // 当前上传不显示时 数据清空
              this.show.expenseCate_fieldJson[index].isShow?this.post[this.show.expenseCate_fieldJson[index].fieldEn] = this.post[this.show.expenseCate_fieldJson[index].fieldEn]:this.show.expenseCate_fieldJson[index].maxCount>1?this.post[this.show.expenseCate_fieldJson[index].fieldEn] = []:this.post[this.show.expenseCate_fieldJson[index].fieldEn] = null
              this.$forceUpdate();  
            }
          }
        }else{
          return false;  
        }
      },
      // 数组去重
      removeVal(arr){
        return [...new Set(arr)];
      },
      // 拿到数组索引
      findArr(fieldCh){
        return this.show.expenseCate_fieldJson.findIndex((value)=>value.fieldCh==fieldCh);
      },
      // switch开关 change钩子函数
      switchChange(val){ 
        this.showCondition(this.show.expenseCate_fieldJson);
      },
      // radio单选框 change钩子函数
      radioChange(val){
        this.showCondition(this.show.expenseCate_fieldJson);
      },
      // 发票是否过期
      switchPirce(val){
        if(val == 1){
          this.show.flag = false;
          let list = this.show.pageChsooch.expenseCate._child
          list = list.filter(item => item.daysNum == 0)
          this.post.expenseCateCompanyPrice_id = list[0].id;   //价格id
          this.computedPrice(list[0]);
        }else{
          this.show.flag = true;
          this.computedPrice(this.post.expend_id);
          this.post.expenseCateCompanyPrice_id = this.post.expend_id.id;
        }
        this.post.isTimeOver = val;  
      },
      otherPayChange(val){
        this.showCondition(this.show.expenseCate_fieldJson);
      },
      radioValue(val,name){
        this.post[name] = val;
      },
      oversize(file){
        Toast('文件大小不能超过 500kb');
      },
      // 上传图片
      afterRead(file,detail){
        // this.handleConfirm(3)
        file.status = 'uploading';
        file.message = '上传中...';
        let list = this.show.expenseCate_fieldJson.filter(item => item.fieldEn == detail.name)
        var index = this.findArr(list[0].fieldCh)
        var upload = new FormData();
        if(this.show[detail.name].length>1){
          this.show[detail.name].map((item) => {
            upload.append('file',item.file);  
          })
        }else{
          upload.append('file',this.show[detail.name][0].file);
        }
        Axios.post(config.get('e_url')+'v1000_upload',upload)
        .then((res) => {
          console.log(res.data.data.data);
          if(res.data.code == 200){
            file.status = 'success';
            if(this.show.expenseCate_fieldJson[index].maxCount>1){
              if(res.data){
                this.post[detail.name].push(res.data.data);   
              } 
            }else{
              this.post[detail.name] = res.data.data;
            }
          }else{
            file.status = 'failed';  
          }
        })
      },
      // 删除图片
      deleteFiles(file={},detail){
        // 当前为多图上传时
        if(typeof this.post[detail.name] == 'object'){
          let params = {path:this.post[detail.name][detail.index]}
          Axios.get(config.get('e_url')+'v1000_del',{params})
          .then((res) => {
            if(res.code == 200){
              this.post[detail.name].splice(detail.index,1)
            }
          })  
        }else{
          let params = {path:this.post[detail.name]}
          Axios.get(config.get('e_url')+'v1000_del',{params})
          .then((res) => {
            if(res.code == 200){
              this.post[detail.name] = '';
            }
          })  
        }
      },
      // 提交订单 （end）
      Submit(){
        console.log(1)
        this.show.submitLoading = true; 
        let params = {}
        if(this.post.isTimeOver == null && this.show.pageChsooch.expenseCate.title != 'SCI'){
          this.show.timeoverDialog = true;
          this.show.submitLoading = false;
        }else{
          // 如果默认报销给自己 那么发薪号 发薪人姓名 都为空
          params.token = sessionStorage.getItem("token")  //token
          this.show.pageChsooch.expenseCate.title != 'SCI'?this.post.isTimeOver == null?'':params.isTimeOver = this.post.isTimeOver:params.isTimeOver = -1;
          params.service_project = this.show.pageChsooch.matter.id;
          // 获取check表单
          if (this.post.isOtherPay == '-1'){
            this.post.payType = ""
            this.post.payNo = ""
            this.post.payName = ""
          }else{
            this.post.payType = this.post.payType;
            this.post.payNo = this.post.payNo;
            this.post.payName = this.post.payName   
          }  
          this.show.expenseCate_fieldJson.map((item) => {
            if(item.type == 'list'){ 
              params[item.fieldEn] = this.post[item.fieldEn]  
            }else if(item.type == 'check'){
              this.post[item.fieldEn] == null ?'':params[item.fieldEn] = this.post[item.fieldEn]  
            }
            else if(item.type == 'file'){
              if(item.maxCount >1){
                this.post[item.fieldEn]  == null || this.post[item.fieldEn].length == 0 ? '':params[item.fieldEn] = JSON.stringify(this.post[item.fieldEn]) 
              }else{
                this.post[item.fieldEn]  == null ? '':params[item.fieldEn] = this.post[item.fieldEn]
              }  
            }else if(item.type == 'input'|| item.type == 'select' ){
                this.post[item.fieldEn] == ''?'':params[item.fieldEn] = this.post[item.fieldEn];  
            }  
          })
          params.expenseCateCompanyPrice_id = this.post.expenseCateCompanyPrice_id; 
          params.isSetSelfName = this.post.isSetSelfName?'1':'-1'
          get('ordersAddSub',params,res=>{
            if(res.code == 200 ){
              this.show.submitLoading = false;
              Toast.success(`提交订单成功！`);
              this.$router.push({
                path:'/pay/payMethod',
                query:{
                  pay_info_id: res.data.pay_info_id,
                  front_url: `${this.show.baseUrl}/user/home`,
                }
              })
            }else{
              this.show.submitLoading = false;
              Dialog.alert({
                title:'提示',
                message:res.data.split(':')[1].split(/[a-zA-Z]/.exec(res.data.split(':')[1]))[0]
              })
            }
          })
        }
      },
      // 返回上一级
      onClickLeft(){
        this.$router.go(-1)
      },
      backTop () {
      this.show.timeoverDialog = false;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-this.show.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = this.show.scrollTop + ispeed
        if (this.show.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
  },

    },
    // 请求数据
    created(){
      get('ordersAddPage',{id:config.get('userInfo').user.id},res=>{
        this.show.loading = false;
        this.online.data = res.data
        this.online.expenseCateCompanyPriceTree = res.data.expenseCateCompanyPriceTree;
      })
    },
  
  }
</script>
<style lang="less" scoped>
.apply {
    width: 100%;
    height: auto;
    overflow-x: hidden;
}
.form {
    height: 100%;
    margin:10px 0 60px 0;
}
// 插槽文字
.footer-btn>button{
  height:100%;
  width:auto;
  padding:10px 15px;
  background: rgb(0, 22, 255);
  color:#fff;
  border:none;
  border-radius:30px;
  color:#fff;
}
// 遮罩层
.loading-box{
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  z-index:999; 
}
.van-radio {
  padding:.1rem 0;
}
.van-cell {
  margin-bottom:15px!important;
}
/deep/ .van-field__control{
  display:initial !important; 
}
.data-wrap{
  .van-cell{
    margin-bottom:0 !important;  
  }
}
.tips{
    color:#ccc;
}
/deep/ .van-field__label{
  width:6.8em;
}
</style>